<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!-- 页面上的东西做出来 -->
    <input type="text" id="oipt">
    <p id="op"></p>
</body>
</html>
<script>
    let obj = {}
    let val = "初始值"
    Object.defineProperty(obj,'value',{
        get(){
            return val;
        },
        set(newVal){
            oipt.value = newVal;
            op.innerHTML = newVal;
        }
    })
//设置初始值
oipt.value = obj.value;
op.innerHTML = obj.value;
//下面就是修改设置的这两个初始值就完了，set方法
oipt.addEventListener('keyup',e=>{
    //按照vue的思想：通过数据的变化，控制界面的变化
    obj.value = e.target.value;  //触发set事件的
})
</script>